<template>
  <basic-container>
    <avue-crud
      v-model="form"
      v-bind="bindVal"
      :page.sync="page"
      v-on="onEvent"
    >
      <template slot="menuLeft">
        <el-button type="danger" icon="el-icon-plus">新增</el-button>
      </template>
      <template slot="roleNames" slot-scope="scope">
        <template v-for="name in scope.row.roleNames">
          {{ name }}

        </template>

      </template>
      <template slot="status" slot-scope="scope">

        <el-tag :type="scope.row.status == 0 ? 'success' : 'danger'" disable-transitions>
          {{ scope.row.status == 0 ? '正常' : '禁用' }}
        </el-tag>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import { getRoleListPage } from '@/api/admin/role'
export default window.$crudCommon({
  data() {
    return {
      roledic: []
    }
  },
  mounted() {
    getRoleListPage().then(re => {
      this.roledic = re.data.list
    })
  },
  methods: {
    // 列表前操作方法
    listBefore() {},

    // 列表后操作方法
    listAfter() {},

    // 新增前操作方法
    addBefore() {
      this.form = {
        nickName: this.form.nickName,
        userName: this.form.userName,
        password: this.form.password,
        roleIds: this.form.roleNames
      }
    },
    // 新增后操作方法
    addAfter() {},

    // 修改前操作方法
    updateBefore() {
      this.form.updateUser = 'small'
    },

    // 修改后操作方法
    updateAfter() {},

    // 删除后操作方法
    delAfter() {}
  }
}, {
  name: 'admin/userauve', // 模块名字
  list: 'list', // 列表接口名字
  update: 'update', // 更新接口名字
  add: 'add', // 新增接口名字
  del: 'del', // 删除接口名字
  rowKey: 'id', // 主键
  pageNumber: 'pageNumber', // 页码
  pageSize: 'pageSize', // 页数
  res: (data) => {
    return {
      total: 0,
      list: []
    }
  }, // 列表的结构
  total: 'total', // 总页数
  data: 'list'// 列表属性
})
</script>
<style lang="scss" scoped>
</style>
